
<template>
  <div :class="`avatar ${size}`" @click="handleClick">
    <img v-lazy="imageLazy" :alt="alt">
    <slot name="extra"></slot>
  </div>
</template>
<script>
// TODO 预留组件,方便以后处理加载用户头像失败的通用处理
const imageUrl = require('IMG/custom/placeholder-header-img.png')

export default {
  props: {
    avatar: { type: String },
    size: {
      type: String,
      default: 'normal'
    }
  },
  data() {
    return {
      alt: '头像',
      max: 99,
      imageLazy: {
        src: this.avatar || imageUrl,
        error: imageUrl,
        loading: imageUrl
      },
    }
  },
  methods: {
    handleClick() {
      this.$emit('on-click')
    }
  }
}
</script>
<style lang="less" scoped>
.avatar {
  position: relative;
  display: inline-block;

  &.mini{
    width: 24px;
    height: 24px;
  }
  &.small{
    width: 40px;
    height: 40px;
  }
  &.normal{
    width: 48px;
    height: 48px;
  }
  &.large{
    width: 60px;
    height: 60px;
  }

  > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
  }
}
</style>
